<template>
	<view class="group">
		<view class="groupbuy-list">
			<view class="list" v-for="(item,index) in groupBuyList" :key="index" @click="joinGroupDetailsPage(item)">
				<view class="list-left">
					<image :src="item.img" mode=""></image>
				</view>
				<view class="list-right">
					<view class="list-right-top">
						<text class="text">{{item.text}}</text>
						{{item.name}}
					</view>
					<view class="list-right-con">
						<view class="list-right-con-top">
							<image src="../../static/index/rs.png" mode=""></image>
							<text>{{item.num}}人团</text>
						</view>
						<view class="data">
							截止时间：{{item.data}}
						</view>
					</view>
					<view class="price">
						<view class="price-left">
							<text class="price-on"><text class="price-red">￥</text>{{item.displayPrice}}</text>
							<text class="price-to"><text class="price-ri">￥</text>{{item.hidePrice}}</text>
						</view>
						<text class="iwanttojoinagroup">我要拼团</text>
					</view>
				</view>
			</view>		
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				groupBuyList:[
					{
						img:'/static/index/list-img_03.gif',
						text:'新用户专享',
						name:'防摔玻璃奶瓶 耐高温 新生儿宝宝婴儿宽口奶瓶',
						num:'3',
						data:'2020-20-10 23:59:59',
						displayPrice:'59.90',
						hidePrice:'98.9'
					},
					{
						img:'/static/index/list-img_03.gif',
						text:'新用户专享',
						name:'防摔玻璃奶瓶 耐高温 新生儿宝宝婴儿宽口奶瓶',
						num:'3',
						data:'2020-20-10 23:59:59',
						displayPrice:'59.90',
						hidePrice:'98.9'
					}
				]
			};
		},
		
		methods:{
			joinGroupDetailsPage(){
				uni.navigateTo({
					url:'/pages/groupbuy/join-details'
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: #F7F7F7;
}
.group{
	padding:20rpx;
	
	.groupbuy-list{
		width: 100%;
		height:100%;
		
		.list{
			padding:10rpx;
			margin-bottom: 20rpx;
			background-color:#FFFFFF;
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			
			.list-left{
				display: flex;
				align-items: center;
				
				
				image{
					width: 264rpx;
					height: 264rpx;
					display: block;
				}
			}
			.list-right{
				height:264rpx;
				margin-left:25rpx;
				
				.list-right-top{
					display: -webkit-box;
					text-overflow: ellipsis;
					padding: 0 41rpx 0 0;
					line-height: 42rpx;
					font-size: 28rpx;
					font-family:PingFang SC;
					font-weight: 500;
					color:rgba(41,41,41,1);
					
								
					.text{
						display: inline-block;
						width:108rpx;
						border:1rpx solid rgba(242,87,113,1);
						line-height: 28rpx;
						text-align: center;
						border: 1px solid #f25771;
						border-radius: 6rpx;
						font-size: 18rpx;
						font-family: PingFang;
						font-weight: 400;
						color: #f24952;
						margin-right: 10rpx;						
					}
				}
				.list-right-con{
					margin-top: 10rpx;
					line-height: 42rpx;
					
					.list-right-con-top{
						display: flex;
						align-items: center;
						overflow: hidden;
						
						image{
							width: 32rpx;
							height: 32rpx;
							display: block;
						}
						text{
							margin-left: 5rpx;
							font-size:26rpx;
							font-family:PingFang SC;
							font-weight:500;
							color:rgba(51,51,51,1);
						}
					}
					.data{
						
						font-size:22rpx;
						font-family:PingFang SC;
						font-weight:500;
						color:rgba(153,153,153,1);
					}
				}
				.price{
					margin-top: 18rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					.price-left{
						display: flex;
						align-items: center;
						
						.price-on{
							font-size:32rpx;
							font-family:PingFang SC;
							font-weight:500;
							color:rgba(240,29,49,1);
							
							.price-red{
								font-size:24rpx;
							}
						}
						.price-to{
							margin-left: 10rpx;
							font-size:24rpx;
							font-family:PingFang SC;
							font-weight:500;
							text-decoration:line-through;
							color:#A3A3A3;
							
							.price-ri{
								font-size:20rpx;
							}
						}
					}
					.iwanttojoinagroup{
						display: block;
						padding:16rpx 33rpx;
						background:linear-gradient(-90deg,rgba(247,40,74,1) 0%,rgba(247,79,107,1) 100%);
						border-radius:28px;
						font-size:24rpx;
						font-family:PingFang SC;
						font-weight:500;
						color:rgba(255,255,255,1);
						
					}
				}
			}
		}
	}
}
</style>
